<template>
	<view class="mbti-login">
		<mBack ref="mBack" @getGameResult="handleBack"></mBack>
		<view class="mbti-login-content" :style="{'padding-top':contentTop+'rpx','background-image': `url(${bgUrl})`}">
			<view class="mbti-login-inner flex-column-start-center">
				<view class="login-top-info flex-row-between-center" @click="handleTopInfoClick">
					<view class="login-info flex-row-start-center">
						<view class="login-avatar" style="margin-right: 28rpx;"
							:class="{'login-avatar-border':(userInfo&&userInfo.headUrl)}">
							<image v-if="!userInfo||!userInfo.headUrl" class="cover-img" style="border-radius: 50%;"
								:src="avatarUrl" mode="aspectFill">
							</image>
							<image v-else class="cover-img" style="border-radius: 50%;" :src="userInfo.headUrl"
								mode="aspectFill">
							</image>
						</view>
						<view class="username-box" :class="{'username-has-login':userInfo}">
							<view class="username-content">
								<text v-if="!userInfo">登录/注册</text>
								<text v-else>{{userInfo.username}}</text>
							</view>

						</view>
					</view>
					<view class="right-control-icon flex-row-center-center">
						<image
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/33a0ab3240e444f182a3918d81d7ce4b.png"
							class="cover-img" mode="aspectFill"></image>
					</view>

				</view>
				<view class="login-center-info login-line-info-base">
					<view class="login-info-item" v-for="(item,index) in centerInfo" :key="index">
						<view class="info-item-content flex-row-between-center"
							@click="handleInfoItemClick(item,index)">
							<view class="info-item-inner flex-row-between-center">
								<view class="info-item-label flex-row-center-center">{{item.label}}</view>
								<view class="info-item-text flex-row-end-center" v-if="!item.value">{{item.tip}}</view>
								<view class="info-item-text info-item-text-value flex-row-end-center" v-else>
									<text v-if="item.valueType=='phone'">{{item.value|maskPhone}}</text>
									<text v-else>{{item.value}}</text>
								</view>
							</view>
							<view class="right-control-icon flex-row-center-center" style="margin-right: 4rpx;">
								<image
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e9d6c0cf96c5447f968c5db37a1fb279.png"
									class="cover-img" mode="aspectFill"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="login-bottom-info login-line-info-base">
					<view class="login-info-item flex-row-between-center" v-for="(item,index) in bottomInfo"
						:key="index">
						<view class="info-item-content flex-row-between-center">
							<view class="info-item-inner flex-row-between-center">
								<view class="info-item-label flex-row-center-center">{{item.label}}</view>
								<view class="info-item-text flex-row-end-center" v-if="!item.value">{{item.tip}}</view>
								<view class="info-item-text info-item-text-value flex-row-end-center" v-else>
									{{item.value}}

								</view>
							</view>
							<view class="right-control-icon flex-row-center-center" style="margin-right: 4rpx;">
								<image
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e9d6c0cf96c5447f968c5db37a1fb279.png"
									class="cover-img" mode="aspectFill"></image>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<mbtiPop ref="mbtiPop" @confirmValue="handlePopConfirm" @cancel="handlePopCancel" @callBack="handlePopCallBack"
			:inputAlignRight="true">

		</mbtiPop>
	</view>
</template>

<script>
	import mbtiPop from "@/components/m-mbti/mbti-pop.vue"
	import mBack from "@/components/m-back/index.vue"
	import {
		handleGetLoginCodePlugin
	} from "@/utils/silentLogin.js"

	import {
		login
	} from '@/utils/mbti-login.js'

	import {
		autoLogin,
		wechatRegister,
		wechatMobile,
		updateUserInfo
	} from "@/api/mbti"

	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import storage from "@/utils/storage"


	export default {
		components: {
			mbtiPop,
			mBack
		},
		data() {
			return {
				registerForm: {
					username: "loong",
					mobile: "19167041634",
					headUrl: "",
					openid: "",
					sex: "",
					birthday: ""
				},
				formData: {
					birthday: "",
					headUrl: "",
					mobile: "",
					openid: "",
					sex: "",
					username: ""
				},
				screenWidth: 375,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				contentTop: 300,
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d394a848c52a40a0b7fc9baf22ba6a01.png",
				avatarUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e3015edc8b2d425680c929fe5c4a59b3.png",
				// 	 "userName": "",
				// 	  "mobile": "",
				// 	  "headUrl": "",
				// 	  "openid": ""
				topInfo: [{
						type: "label-in",
						label: "头像",
						value: "",
						limit: -1,
						valueType: "avatar",
						code: "headUrl",
						isRequire: true
					},
					{
						type: "label-in",
						label: "昵称",
						value: "",
						limit: -1,
						valueType: "nick-name",
						placeholder: "请输入或使用微信昵称",
						code: "username",
						isRequire: true
					},
				],
				centerInfo: [{
						type: "label-in",
						label: "性别",
						tip: "选择我的性别",
						value: "",
						code: "sex",
						valueType: "sex",
						limit: -1,
						isRequire: true
					},
					{
						type: "label-in",
						label: "手机",
						tip: "关联我的手机",
						value: "",
						code: "mobile",
						valueType: "phone",
						limit: -1,
						isRequire: true,
						placeholder: "关联我的常用手机号",
					},
					{
						type: "label-in",
						label: "生日",
						tip: "选择我的生日",
						value: "",
						code: "birthday",
						valueType: "date",
						limit: -1,
						isRequire: true,
						placeholder: "选择我的生日",

					},
				],
				bottomInfo: [{
						label: "关于Clackey",
						tip: "V1.1.02",
						value: ""
					},
					{
						label: "意见反馈",
						tip: "",
						value: ""
					},
				]

			}
		},
		watch: {
			userInfo: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.formData = {
							...newVal
						}
					}
				},
				deep: true,
				immediate: true
			},
			// 之后去除
			formData: {
				handler(newVal, oldVal) {
					if (newVal) {
						Object.entries(newVal).forEach((item, index) => {
							this.handleUpdateFormDataList(item[0], item[1])
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		onShow() {
			let token = storage.getAccessToken()
			if (token) {
				// 存在token 通过登录获取并更新一次用户信息
				login(true)
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop

				this.contentTop = rpxTop + rpxHeight + 72



			} catch (error) {
				//TODO handle the exception
			}
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		filters: {
			maskPhone(phone) {
				return String(phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
			}
		},
		methods: {
			...mapMutations(['updateUerInfo']),
			handleUpdateFormDataList(code, value) {
				this.centerInfo.forEach((item, index) => {
					if (item.code == code) {
						item.value = value
					}
				})
				this.topInfo.forEach((item, index) => {
					if (item.code == code) {
						item.value = value
					}
				})
			},
			handlePopCallBack() {

			},
			handlePopCancel() {

			},
			handlePopConfirm(e) {
				// 弹修改成功？要不要做对比？
				let arr = [...e.data]
				arr.forEach((item, index) => {
					this.formData[String(item.code)] = item.value
				})
				if (this.userInfo) {
					updateUserInfo(this.formData).then(res => {
						let data = res.data.data
						if (data) {
							this.formData = {
								...data
							}
							this.updateUerInfo(this.formData)
							uni.showToast({
								title: "修改成功",
								icon: "none"
							})
						}


					}).catch(err => {
						console.log("失败");
					})
				} else {
					wechatRegister(this.formData).then(res => {
						login().then(resl => {
							let {
								hasRegister,
								data
							} = resl
							if (!hasRegister) {
								// 登录pop弹出
								this.handleOpenPop('all')

							} else {
								// 提示登录成
								uni.showToast({
									title: "登录成功",
									icon: "none"
								})
							}
						})
					})
				}

				// console.log("返回的是", this.formData);
			},
			getPhoneNumber(e) {
				let code = e.detail.code
				wechatMobile({
					code
				}).then(res => {
					this.registerForm.mobile = res.data.data
					// console.log("返回", this.registerForm.mobile);
				})
			},
			onChooseAvatar(e) {
				console.log("返回", e);
			},
			handleOpenPop(type, data) {
				let inputData = []
				if (type == 'all') {
					inputData = [...this.topInfo].concat(this.centerInfo)
				} else if (type == 'avatar-name') {
					inputData = [...this.topInfo]
				} else if (type == 'only') {
					inputData = [{
						...data
					}]
				}

				this.$refs.mbtiPop.open({
					data: inputData,
					title: "我的资料",
				})


			},
			handleTopInfoClick() {
				if (this.userInfo) {
					this.handleOpenPop("avatar-name")
				} else {
					login().then(res => {
						let {
							hasRegister,
							data
						} = res
						if (!hasRegister) {
							this.formData.openid = data.openid
							// 登录pop弹出
							this.handleOpenPop('all')

						} else {
							// 提示登录成
							uni.showToast({
								title: "登录成功",
								icon: "none"
							})
						}

					})
				}
			},
			handleBack() {
				uni.navigateBack()
			},
			handleInfoItemClick(item, index) {
				this.handleOpenPop('only', item)

				console.log("项的点击", item);

			},

			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mbti-login {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #ededed;
		box-sizing: border-box;

		.mbti-login-content {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;

			.mbti-login-inner {
				width: 100%;
				padding: 0rpx 48rpx;

				.login-top-info {
					width: 100%;
					height: 104rpx;
					margin-bottom: 40rpx;
					padding-right: 32rpx;

					.login-info {
						flex: 1;
						height: 100%;

						.login-avatar {
							position: relative;
							width: 104rpx;
							height: 104rpx;
							background-color: #fff;
							border-radius: 50%;

							// padding: 2rpx;
							.login-avatar-btn {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								z-index: 999;
								width: 100%;
								height: 100%;
								opacity: 0;
							}
						}

						.login-avatar-border {
							border: 2rpx solid #FFFFFF;
						}

						.username-box {
							flex: 1;
							font-weight: 500;
							font-size: 40rpx;
							color: #979797;
							line-height: 56rpx;
							text-align: left;

							.username-content {
								width: 450rpx;
								height: 100%;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
							}

						}

						.username-has-login {
							color: #153135;
						}

					}


				}

				.login-center-info {}

				.login-line-info-base {
					width: 100%;
					border-radius: 20rpx;
					background-color: #fff;
					margin-bottom: 40rpx;
				}

				.login-info-item {
					width: 100%;
					height: 116rpx;
					padding: 0rpx 28rpx;

					.info-item-content {
						position: relative;
						width: 100%;
						height: 100%;

						&::after {
							content: "";
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 0.5rpx;
							background-color: #ebebeb;
						}
					}

					.info-item-inner {
						flex: 1;
						height: 100%;
						margin-right: 28rpx;

						.info-item-label {
							height: 100%;
							font-weight: 300;
							font-size: 32rpx;
							color: #494949;
						}

						.info-item-text {
							flex: 1;
							height: 100%;
							font-weight: 400;
							font-size: 32rpx;
							color: #ebebeb;
							line-height: 40rpx;
						}

						.info-item-text-value {
							color: #494949;
						}
					}

					&:last-child {
						.info-item-content {
							&::after {
								display: none;
							}
						}
					}
				}
			}
		}
	}

	.right-control-icon {
		width: 12rpx;
		height: 20rpx;
	}
</style>